﻿<div>

    <script type="text/javascript">
        $(function () {
            var t = $("#t1").datagrid({
                title: 'test datagrid',
                width: 1200,
                height: 400,
                method: "get",
                url: "datagrid/datagrid-data.json",
                idField: 'ID',
                remoteSort: false,
                frozenColumns: [[
                    { field: 'ck', checkbox: true },
                    { field: 'ID', title: 'ID', width: 80, sortable: true }
                ]],
                columns: [[
                    { field: 'Code', title: '编号(Code)', width: 120, editor: "text" },
                    { field: 'Name', title: '名称(Name)', width: 140, editor: "text" },
                    { field: 'Age', title: '年龄(Age)', width: 120, editor: "text" },
                    { field: 'Height', title: '身高(Height)', width: 140, editor: "text" },
                    { field: 'Weight', title: '体重(Weight)', width: 140, editor: "text" },
                    { field: 'CreateDate', title: '创建日期(CreateDate)', width: 180 },
                    { field: 'undefined', title: '测试(不存在的字段)', width: 150 }
                ]],
                rowContextMenu: [
                    { text: "编辑", iconCls: "icon-edit", handler: function (e, index) { t.datagrid("beginEdit", index); } }
                ],
                pagination: true,
                //enableHeaderClickMenu: false,
                //enableHeaderContextMenu: false,
                //enableRowContextMenu: false,
                autoEditing: true,          //该属性启用双击行时自定开启该行的编辑状态
                extEditing: true,           //该属性启用行编辑状态的 ExtEditing 风格效果，该属性默认为 true。
                singleEditing: false        //该属性为 false 时禁用 datagrid 的只允许单行编辑效果，也就是允许多行同时编辑
            });


            var i = 20,
                getRow = function () {
                    return { ID: ++i, Code: i, Name: "TestName" + i, Age: 18, Height: 159, Weight: 49, CreateDate: "2008-02-11" };
                };
            $("#Button1").click(function () {
                t.datagrid("appendRow", getRow());
            });

            $("#Button2").click(function () {
                t.datagrid("insertRow", { index: 1, row: getRow() });
            });
        });
    </script>

    <h2>jEasyUI DataGrid Extensions - 仿 ExtRowEditing 编辑风格 - 多行编辑状态 RowEditing</h2>
    <p>该部分扩展由文件 jeasyui.extensions.datagrid.js 实现。</p>
    <hr />
    <p>双击表格中的任意行试试，该表格可以同时编辑多行</p>
    <hr />
    <input id="Button1" type="button" value="appendRow测试数据" />
    <input id="Button2" type="button" value="insertRow测试数据" />
    <hr />
    <table id="t1"></table>
    <hr />
    由于收到 xxx.json 文件数据源不能进行逻辑分析处理的限制，此处点击翻页后，仅页码更新而数据不会更新

</div>